<script lang="ts" setup>
import { useI18n } from '@/hooks/web/useI18n'
import { PropType, toRefs, nextTick, watch, ref, computed } from 'vue'
import MiscSelector from '@/views/chart/components/editor/editor-style/components/MiscSelector.vue'
import LabelSelector from '@/views/chart/components/editor/editor-style/components/LabelSelector.vue'
import TooltipSelector from '@/views/chart/components/editor/editor-style/components/TooltipSelector.vue'
import XAxisSelector from '@/views/chart/components/editor/editor-style/components/XAxisSelector.vue'
import YAxisSelector from '@/views/chart/components/editor/editor-style/components/YAxisSelector.vue'
import DualYAxisSelector from '@/views/chart/components/editor/editor-style/components/DualYAxisSelector.vue'
import TitleSelector from '@/views/chart/components/editor/editor-style/components/TitleSelector.vue'
import LegendSelector from '@/views/chart/components/editor/editor-style/components/LegendSelector.vue'
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
import { storeToRefs } from 'pinia'
import CollapseSwitchItem from '@/components/collapse-switch-item/src/CollapseSwitchItem.vue'
import { ElCollapse, ElCollapseItem } from 'element-plus-secondary'
import BasicStyleSelector from '@/views/chart/components/editor/editor-style/components/BasicStyleSelector.vue'
import SymbolicStyleSelector from '@/views/chart/components/editor/editor-style/components/SymbolicStyleSelector.vue'
import DualBasicStyleSelector from '@/views/chart/components/editor/editor-style/components/DualBasicStyleSelector.vue'
import ComponentPosition from '@/components/visualization/common/ComponentPosition.vue'
import BackgroundOverallCommon from '@/components/visualization/component-background/BackgroundOverallCommon.vue'
import TableHeaderSelector from '@/views/chart/components/editor/editor-style/components/table/TableHeaderSelector.vue'
import TableCellSelector from '@/views/chart/components/editor/editor-style/components/table/TableCellSelector.vue'
import TableTotalSelector from '@/views/chart/components/editor/editor-style/components/table/TableTotalSelector.vue'
import SummarySelector from '@/views/chart/components/editor/editor-style/components/table/SummarySelector.vue'
import MiscStyleSelector from '@/views/chart/components/editor/editor-style/components/MiscStyleSelector.vue'
import IndicatorValueSelector from '@/views/chart/components/editor/editor-style/components/IndicatorValueSelector.vue'
import IndicatorNameSelector from '@/views/chart/components/editor/editor-style/components/IndicatorNameSelector.vue'
import QuadrantSelector from '@/views/chart/components/editor/editor-style/components/QuadrantSelector.vue'
import FlowMapLineSelector from '@/views/chart/components/editor/editor-style/components/FlowMapLineSelector.vue'
import FlowMapPointSelector from '@/views/chart/components/editor/editor-style/components/FlowMapPointSelector.vue'
import CommonBorderSetting from '@/custom-component/common/CommonBorderSetting.vue'
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
import BulletTargetSelector from '@/views/chart/components/editor/editor-style/components/bullet/BulletTargetSelector.vue'
import BulletMeasureSelector from '@/views/chart/components/editor/editor-style/components/bullet/BulletMeasureSelector.vue'
import BulletRangeSelector from '@/views/chart/components/editor/editor-style/components/bullet/BulletRangeSelector.vue'

const snapshotStore = snapshotStoreWithOut()

const dvMainStore = dvMainStoreWithOut()
const { dvInfo, batchOptStatus, mobileInPc } = storeToRefs(dvMainStore)
const { t } = useI18n()

const state = {
  attrActiveNames: [],
  styleActiveNames: [],
  initReady: true
}

const props = defineProps({
  commonBackgroundPop: {
    type: Object,
    required: false
  },
  commonBorderPop: {
    type: Object,
    required: false
  },
  chart: {
    type: Object as PropType<ChartObj>,
    required: true
  },
  themes: {
    type: String as PropType<EditorTheme>,
    default: 'dark'
  },
  dimensionData: {
    type: Array,
    required: true
  },
  quotaData: {
    type: Array,
    required: true
  },
  properties: {
    type: Array as PropType<EditorProperty[]>,
    required: false,
    default: () => {
      return []
    }
  },
  propertyInnerAll: {
    type: Object as PropType<EditorPropertyInner>,
    required: false,
    default: () => {
      return {}
    }
  },
  selectorSpec: {
    type: Object as PropType<EditorSelectorSpec>,
    required: false,
    default: () => {
      return {}
    }
  },
  allFields: {
    type: Array,
    required: true
  }
})

const {
  chart,
  themes,
  properties,
  propertyInnerAll,
  commonBackgroundPop,
  commonBorderPop,
  selectorSpec
} = toRefs(props)
const emit = defineEmits([
  'onColorChange',
  'onMiscChange',
  'onLabelChange',
  'onTooltipChange',
  'onChangeXAxisForm',
  'onChangeYAxisForm',
  'onChangeYAxisExtForm',
  'onTextChange',
  'onLegendChange',
  'onBasicStyleChange',
  'onBackgroundChange',
  'onStyleAttrChange',
  'onTableHeaderChange',
  'onTableCellChange',
  'onTableTotalChange',
  'onChangeMiscStyleForm',
  'onExtTooltipChange',
  'onIndicatorChange',
  'onIndicatorNameChange',
  'onChangeQuadrantForm',
  'onChangeFlowMapLineForm',
  'onChangeFlowMapPointForm'
])

const indicatorValueRef = ref()
const indicatorNameRef = ref()

const positionComponentShow = computed(() => {
  return !batchOptStatus.value && dvInfo.value.type !== 'dashboard'
})

const showProperties = (property: EditorProperty) => properties.value?.includes(property)

const onMiscChange = (val, prop) => {
  emit('onMiscChange', val, prop)
}

const onLabelChange = (val, prop) => {
  state.initReady && emit('onLabelChange', val, prop)
}

const onTooltipChange = (val, prop) => {
  state.initReady && emit('onTooltipChange', val, prop)
}

const onChangeXAxisForm = (val, prop) => {
  state.initReady && emit('onChangeXAxisForm', val, prop)
}

const onChangeYAxisForm = (val, prop) => {
  if (prop === 'show' && chart.value.type.includes('chart-mix')) {
    chart.value.customStyle.yAxisExt.show = val.show
    onChangeYAxisExtForm(chart.value.customStyle.yAxisExt, 'show')
  }
  state.initReady && emit('onChangeYAxisForm', val, prop)
}

const onChangeYAxisExtForm = (val, prop) => {
  state.initReady && emit('onChangeYAxisExtForm', val, prop)
}

const onTextChange = (val, prop) => {
  state.initReady && emit('onTextChange', val, prop)
}

const onIndicatorChange = (val, prop) => {
  const value = { indicatorValue: val, indicatorName: undefined }
  if (prop === 'color' || prop === 'suffixColor') {
    value.indicatorName = indicatorNameRef.value?.getFormData()
  }
  state.initReady && emit('onIndicatorChange', value, prop)
}

const onIndicatorNameChange = (val, prop) => {
  const value = { indicatorName: val, indicatorValue: undefined }
  if (prop === 'color') {
    value.indicatorValue = indicatorValueRef.value?.getFormData()
  }
  state.initReady && emit('onIndicatorNameChange', value, prop)
}

const onLegendChange = (val, prop) => {
  state.initReady && emit('onLegendChange', val, prop)
}
const onBasicStyleChange = (val, prop) => {
  state.initReady && emit('onBasicStyleChange', val, prop)
}

const onBackgroundChange = (val, prop) => {
  snapshotStore.recordSnapshotCache('onBackgroundChange')
  state.initReady && emit('onBackgroundChange', val, prop)
}

const onActiveChange = () => {
  snapshotStore.recordSnapshotCache('onActiveChange')
  state.initReady &&
    emit('onStyleAttrChange', {
      custom: 'style',
      property: 'active',
      value: commonBorderPop.value.borderActive
    })
}

const onStyleAttrChange = ({ key, value }) => {
  state.initReady && emit('onStyleAttrChange', { custom: 'style', property: key, value: value })
}

const onTableHeaderChange = (val, prop) => {
  emit('onTableHeaderChange', val, prop)
}
const onTableCellChange = (val, prop) => {
  emit('onTableCellChange', val, prop)
}
const onTableTotalChange = (val, prop) => {
  emit('onTableTotalChange', val, prop)
}
const onChangeMiscStyleForm = (val, prop) => {
  emit('onChangeMiscStyleForm', val, prop)
}

const onExtTooltipChange = val => {
  emit('onExtTooltipChange', val)
}
const onChangeQuadrantForm = val => {
  emit('onChangeQuadrantForm', val)
}
const onChangeFlowMapLineForm = (val, prop) => {
  emit('onChangeFlowMapLineForm', val, prop)
}
const onChangeFlowMapPointForm = val => {
  emit('onChangeFlowMapPointForm', val)
}
watch(
  () => props.chart.id,
  () => {
    state.initReady = false
    nextTick(() => {
      state.initReady = true
    })
  },
  { deep: true }
)
</script>

<template>
  <el-row class="view-panel" :class="'style-' + themes">
    <div class="attr-style">
      <el-row class="de-collapse-style">
        <el-collapse v-model="state.attrActiveNames" class="style-collapse">
          <el-collapse-item
            :effect="themes"
            name="position"
            :title="t('visualization.position')"
            v-if="positionComponentShow"
          >
            <component-position :themes="themes" />
          </el-collapse-item>
          <el-collapse-item
            :effect="themes"
            name="basicStyle"
            :title="t('chart.basic_style')"
            v-if="showProperties('basic-style-selector')"
          >
            <basic-style-selector
              :property-inner="propertyInnerAll['basic-style-selector']"
              :themes="themes"
              :chart="chart"
              @onBasicStyleChange="onBasicStyleChange"
              @onMiscChange="onMiscChange"
            />
          </el-collapse-item>
          <el-collapse-item
            :effect="themes"
            name="basicStyle"
            :title="t('chart.basic_style')"
            v-if="showProperties('dual-basic-style-selector')"
          >
            <DualBasicStyleSelector
              :property-inner="propertyInnerAll['dual-basic-style-selector']"
              :themes="themes"
              :chart="chart"
              @onBasicStyleChange="onBasicStyleChange"
              @onMiscChange="onMiscChange"
            />
          </el-collapse-item>
          <div v-if="showProperties('bullet-graph-selector')">
            <el-collapse-item :effect="themes" name="bullet" :title="t('chart.progress_target')">
              <bullet-target-selector
                :themes="themes"
                :chart="chart"
                :selector-type="'target'"
                @onBasicStyleChange="onBasicStyleChange"
                @onMiscChange="onMiscChange"
              />
            </el-collapse-item>
            <el-collapse-item :effect="themes" name="measure" :title="t('chart.progress_current')">
              <bullet-measure-selector
                :themes="themes"
                :chart="chart"
                :selector-type="'measure'"
                @onBasicStyleChange="onBasicStyleChange"
                @onMiscChange="onMiscChange"
              />
            </el-collapse-item>
            <el-collapse-item
              style="margin-bottom: 0 !important"
              :effect="themes"
              name="range"
              :title="t('chart.range_bg')"
            >
              <bullet-range-selector
                :themes="themes"
                :chart="chart"
                :selector-type="'range'"
                @onBasicStyleChange="onBasicStyleChange"
                @onMiscChange="onMiscChange"
              />
            </el-collapse-item>
          </div>
          <collapse-switch-item
            :themes="themes"
            v-model="chart.customStyle.text.show"
            v-if="showProperties('title-selector')"
            :change-model="chart.customStyle.text"
            @modelChange="val => onTextChange(val, 'show')"
            name="title"
            :title="$t('chart.title')"
          >
            <title-selector
              :property-inner="propertyInnerAll['title-selector']"
              :themes="themes"
              class="attr-selector"
              :chart="chart"
              @onTextChange="onTextChange"
            />
          </collapse-switch-item>
          <collapse-switch-item
            :themes="themes"
            v-if="showProperties('legend-selector')"
            v-model="chart.customStyle.legend.show"
            :change-model="chart.customStyle.legend"
            @modelChange="val => onLegendChange(val, 'show')"
            name="legend"
            :title="$t('chart.legend')"
          >
            <legend-selector
              class="attr-selector"
              :property-inner="propertyInnerAll['legend-selector']"
              :themes="themes"
              :chart="chart"
              @onLegendChange="onLegendChange"
              @onMiscChange="onMiscChange"
            />
          </collapse-switch-item>
          <el-collapse-item
            :effect="themes"
            name="background"
            :title="t('visualization.background')"
            v-if="showProperties('background-overall-component') && commonBackgroundPop"
          >
            <background-overall-common
              :common-background-pop="commonBackgroundPop"
              :themes="themes"
              @onBackgroundChange="onBackgroundChange"
              component-position="component"
            />
          </el-collapse-item>
          <collapse-switch-item
            v-if="showProperties('border-style') && commonBorderPop && !batchOptStatus"
            v-model="commonBorderPop.borderActive"
            @modelChange="val => onActiveChange(val)"
            :themes="themes"
            :title="t('visualization.board')"
            name="borderSetting"
            class="common-style-area"
          >
            <common-border-setting
              :style-info="commonBorderPop"
              :themes="themes"
              @onStyleAttrChange="onStyleAttrChange"
            ></common-border-setting>
          </collapse-switch-item>

          <el-collapse-item
            :effect="themes"
            name="symbolicStyle"
            :title="t('chart.symbolic')"
            v-if="showProperties('symbolic-style-selector')"
          >
            <SymbolicStyleSelector
              :property-inner="propertyInnerAll['symbolic-style-selector']"
              :themes="themes"
              :chart="chart"
              @onBasicStyleChange="onBasicStyleChange"
              @onMiscChange="onMiscChange"
            />
          </el-collapse-item>
          <el-collapse-item
            :effect="themes"
            v-if="showProperties('indicator-value-selector')"
            name="indicator-value"
            :title="t('chart.indicator_value')"
          >
            <indicator-value-selector
              ref="indicatorValueRef"
              :property-inner="propertyInnerAll['indicator-value-selector']"
              :themes="themes"
              class="attr-selector"
              :chart="chart"
              :quota-fields="props.quotaData"
              @onIndicatorChange="onIndicatorChange"
            />
          </el-collapse-item>
          <collapse-switch-item
            :themes="themes"
            v-model="chart.customAttr.indicatorName.show"
            v-if="showProperties('indicator-name-selector')"
            :change-model="chart.customAttr.indicatorName"
            @modelChange="val => onIndicatorNameChange(val, 'show')"
            :title="t('visualization.indicator_name')"
            name="indicator-name"
          >
            <indicator-name-selector
              ref="indicatorNameRef"
              :property-inner="propertyInnerAll['indicator-name-selector']"
              :themes="themes"
              class="attr-selector"
              :chart="chart"
              :quota-fields="props.quotaData"
              @onIndicatorNameChange="onIndicatorNameChange"
            />
          </collapse-switch-item>
          <el-collapse-item
            :effect="themes"
            v-if="showProperties('misc-selector') && !chart.type.includes('mix')"
            name="size"
            :title="t('visualization.component_size')"
          >
            <misc-selector
              :property-inner="propertyInnerAll['misc-selector']"
              :themes="themes"
              class="attr-selector"
              :chart="chart"
              :quota-fields="props.quotaData"
              :mobile-in-pc="mobileInPc"
              @onMiscChange="onMiscChange"
            />
          </el-collapse-item>
          <el-collapse-item
            :effect="themes"
            v-if="showProperties('misc-style-selector')"
            name="size"
            :title="selectorSpec['misc-style-selector']?.title || t('chart.tooltip_axis')"
          >
            <misc-style-selector
              :property-inner="propertyInnerAll['misc-style-selector']"
              :themes="themes"
              class="attr-selector"
              :chart="chart"
              :quota-fields="props.quotaData"
              @onChangeMiscStyleForm="onChangeMiscStyleForm"
            />
          </el-collapse-item>
          <collapse-switch-item
            :themes="themes"
            v-if="showProperties('label-selector')"
            v-model="chart.customAttr.label.show"
            :change-model="chart.customAttr.label"
            @modelChange="val => onLabelChange({ data: val }, 'show')"
            :title="t('chart.label')"
            name="label"
          >
            <label-selector
              :property-inner="propertyInnerAll['label-selector']"
              :themes="themes"
              class="attr-selector"
              :chart="chart"
              :all-fields="props.allFields"
              @onLabelChange="onLabelChange"
            />
          </collapse-switch-item>
          <collapse-switch-item
            v-if="showProperties('tooltip-selector')"
            v-model="chart.customAttr.tooltip.show"
            :themes="themes"
            :change-model="chart.customAttr.tooltip"
            :title="t('chart.tooltip')"
            :show-switch="propertyInnerAll['tooltip-selector'].includes('show')"
            name="tooltip"
            @modelChange="val => onTooltipChange({ data: val }, 'show')"
          >
            <tooltip-selector
              class="attr-selector"
              :property-inner="propertyInnerAll['tooltip-selector']"
              :themes="themes"
              :chart="chart"
              :all-fields="props.allFields"
              @onTooltipChange="onTooltipChange"
              @onExtTooltipChange="onExtTooltipChange"
            />
          </collapse-switch-item>
          <collapse-switch-item
            v-if="showProperties('table-header-selector')"
            v-model="chart.customAttr.tableHeader.showTableHeader"
            :change-model="chart.customAttr.tableHeader"
            :effect="themes"
            :title="t('chart.table_header')"
            :show-switch="propertyInnerAll['table-header-selector'].includes('showTableHeader')"
            name="tableHeader"
            @modelChange="val => onTableHeaderChange(val, 'showTableHeader')"
          >
            <table-header-selector
              :property-inner="propertyInnerAll['table-header-selector']"
              :themes="themes"
              :chart="chart"
              @onTableHeaderChange="onTableHeaderChange"
            />
          </collapse-switch-item>
          <el-collapse-item
            :effect="themes"
            name="tableCell"
            :title="t('chart.table_cell')"
            v-if="showProperties('table-cell-selector')"
          >
            <table-cell-selector
              :property-inner="propertyInnerAll['table-cell-selector']"
              :themes="themes"
              :chart="chart"
              @onTableCellChange="onTableCellChange"
            />
          </el-collapse-item>
          <el-collapse-item
            :effect="themes"
            name="tableTotal"
            :title="t('chart.table_total')"
            v-if="showProperties('table-total-selector')"
          >
            <table-total-selector
              :property-inner="propertyInnerAll['table-total-selector']"
              :themes="themes"
              :chart="chart"
              @onTableTotalChange="onTableTotalChange"
            />
          </el-collapse-item>
          <el-collapse-item
            :effect="themes"
            name="quadrant"
            :title="t('chart.quadrant')"
            v-if="showProperties('quadrant-selector')"
          >
            <quadrant-selector
              class="attr-selector"
              :property-inner="propertyInnerAll['quadrant-selector']"
              :themes="themes"
              :chart="chart"
              @onChangeQuadrantForm="onChangeQuadrantForm"
            />
          </el-collapse-item>
          <el-collapse-item
            :effect="themes"
            name="flowMapLineSelector"
            :title="t('chart.line')"
            v-if="showProperties('flow-map-line-selector')"
          >
            <flow-map-line-selector
              class="attr-selector"
              :property-inner="propertyInnerAll['flow-map-line-selector']"
              :themes="themes"
              :chart="chart"
              @onChangeFlowMapLineForm="onChangeFlowMapLineForm"
              @onBasicStyleChange="onBasicStyleChange"
            />
          </el-collapse-item>
          <el-collapse-item
            :effect="themes"
            name="flowMapPointSelector"
            :title="t('visualization.component_annotation')"
            v-if="showProperties('flow-map-point-selector')"
          >
            <flow-map-point-selector
              class="attr-selector"
              :property-inner="propertyInnerAll['flow-map-point-selector']"
              :themes="themes"
              :chart="chart"
              @onChangeFlowMapPointForm="onChangeFlowMapPointForm"
            />
          </el-collapse-item>
        </el-collapse>

        <el-collapse v-model="state.styleActiveNames" class="style-collapse">
          <collapse-switch-item
            :themes="themes"
            v-if="showProperties('x-axis-selector')"
            v-model="chart.customStyle.xAxis.show"
            :change-model="chart.customStyle.xAxis"
            @modelChange="val => onChangeXAxisForm(val, 'show')"
            name="xAxis"
            :title="selectorSpec['x-axis-selector']?.title || t('chart.xAxis')"
          >
            <x-axis-selector
              class="attr-selector"
              :property-inner="propertyInnerAll['x-axis-selector']"
              :themes="themes"
              :chart="chart"
              @onChangeXAxisForm="onChangeXAxisForm"
            />
          </collapse-switch-item>
          <collapse-switch-item
            :themes="themes"
            v-if="showProperties('y-axis-selector')"
            v-model="chart.customStyle.yAxis.show"
            :change-model="chart.customStyle.yAxis"
            @modelChange="val => onChangeYAxisForm(val, 'show')"
            name="yAxis"
            :title="t('chart.yAxis')"
          >
            <y-axis-selector
              class="attr-selector"
              :property-inner="propertyInnerAll['y-axis-selector']"
              :themes="themes"
              :chart="chart"
              @onChangeYAxisForm="onChangeYAxisForm"
            />
          </collapse-switch-item>

          <collapse-switch-item
            :themes="themes"
            v-if="showProperties('dual-y-axis-selector')"
            v-model="chart.customStyle.yAxis.show"
            :change-model="chart.customStyle.yAxis"
            @modelChange="val => onChangeYAxisForm(val, 'show')"
            name="yAxis"
            :title="selectorSpec['dual-y-axis-selector']?.title ?? t('chart.yAxis')"
          >
            <dual-y-axis-selector
              class="attr-selector"
              :property-inner="propertyInnerAll['dual-y-axis-selector']"
              :themes="themes"
              :chart="chart"
              @onChangeYAxisForm="onChangeYAxisForm"
              @onChangeYAxisExtForm="onChangeYAxisExtForm"
            />
          </collapse-switch-item>

          <collapse-switch-item
            :themes="themes"
            v-if="showProperties('summary-selector')"
            v-model="chart.customAttr.basicStyle.showSummary"
            :change-model="chart.customAttr.basicStyle"
            @modelChange="val => onBasicStyleChange({ data: val }, 'showSummary')"
            :title="t('chart.table_summary')"
            name="summary"
          >
            <summary-selector
              :property-inner="propertyInnerAll['summary-selector']"
              :themes="themes"
              :chart="chart"
              @onBasicStyleChange="onBasicStyleChange"
            />
          </collapse-switch-item>
        </el-collapse>
      </el-row>
    </div>
  </el-row>
</template>

<style lang="less" scoped>
.ed-row {
  display: block;
}

.prop {
  border-bottom: 1px solid @side-outline-border-color;
}
.prop-top {
  border-top: 1px solid @side-outline-border-color;
}

span {
  font-size: 14px;
}

.view-panel {
  display: flex;
  height: 100%;
  width: 100%;
}

.attr-style {
  overflow-y: auto;
  height: 100%;
  width: 100%;
}

.de-collapse-style {
  :deep(.ed-form-item) {
    display: block;
    margin-bottom: 8px;
  }
  :deep(.ed-form-item__label) {
    justify-content: flex-start;
  }
}
:deep(.ed-collapse-item) {
  &:first-child {
    .ed-collapse-item__header {
      border-top: none;
    }
  }
}
.style-collapse:empty {
  border-bottom: none;
}

:deep(.ed-collapse-item__content) {
  padding: 16px 8px 8px 8px !important;
}
</style>
